/*
* @moudule:@/views/budget/list_download/TOPO
* @author:zm
* @date:2020-11-5
*/
<template>
  <div class="total_container">
    <header>
      <p>波动TOP</p>
      <el-button size="mini" @click="handle_back">返回</el-button>
    </header>
    <main>
      <div v-if="!isDetail">
            <el-form :inline="true" :model="form" class="main_searchBar" ref="form">
                <el-form-item label="区域:">
                <dx-cascader :area_id.sync="form.areaId" ref="cascader" />
                </el-form-item>
                <el-form-item label="收入指标:">
                <el-select size="mini" v-model="form.code" clearable>
                    <el-option v-for="(item, index) in codeList" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="客户群:" v-show="tabActive =='list1'">
                <el-select size="mini" v-model="form.customer1" clearable>
                    <el-option v-for="(item, index) in customerList1" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="客户群:" v-show="tabActive!='list1'">
                <el-select size="mini" v-model="form.customer" clearable>
                    <el-option v-for="(item, index) in customerList" :key="index" :label="item.indexName" :value="item.indexCode"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="账期:">
                <!-- <el-date-picker
                    size="mini"
                    v-model="form.accountPeriod"
                    value-format="yyyyMM"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                    v-show="tabActive!='list7'"
                ></el-date-picker> -->
                <el-date-picker
                    size="mini"
                    v-model="form.accountPeriodAll"
                    value-format="yyyyMM"
                    type="month"
                    placeholder="选择月"
                    :picker-options="pickerOptions"
                ></el-date-picker>
                </el-form-item>
                <el-form-item label="Top:" v-show="tabActive!='list1'">
                <el-select size="mini" v-model="form.pageSize" clearable>
                    <el-option v-for="(item, index) in pageSizeList" :key="index" :label="item.name" :value="item.code"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item label="资产/客户:" v-show="tabActive!='list1'">
                <el-select size="mini" v-model="form.assetType" clearable>
                    <el-option v-for="(item, index) in assetTypeList" :key="index" :label="item.name" :value="item.value"></el-option>
                </el-select>
                </el-form-item>
                <el-form-item>
                <el-button size="mini" id="search_btn" v-loading="tableLoading" @click="handle_search">查询</el-button>
                <el-button size="mini" id="export_btn" @click="handle_export">导出</el-button>
                </el-form-item>
            </el-form>
            <div class="tables">
                <el-tabs v-model="tabActive" type="card" @tab-click="handleClick" style="margin-top: 10px;">
                <el-tab-pane label="波动汇总" name="list1"></el-tab-pane>
                <el-tab-pane label="本期新增TOP资产" name="list2"></el-tab-pane>
                <el-tab-pane label="本期流失TOP资产" name="list3"></el-tab-pane>
                <el-tab-pane label="存量下降波动" name="list4"></el-tab-pane>
                <el-tab-pane label="存量上涨波动" name="list5"></el-tab-pane>
                <el-tab-pane label="存量转入" name="list6"></el-tab-pane>
                <el-tab-pane label="存量转出" name="list7"></el-tab-pane>
                </el-tabs>
                <!-- 波动汇总 -->
                <div v-show="tabActive=='list1'">
                <el-table
                    :max-height="height+'px'"
                    id="table1"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData1"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column align="center" v-for="(item, index) in titleList7" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>

                <div v-show="tabActive=='list2'">
                <el-table
                    :max-height="height+'px'"
                    id="table2"
                    ref="table2"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData2"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="100" align="center" :label="titleList1[0] && titleList1[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList1[0].prop])">{{scope.row[titleList1[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column  align="center" v-for="(item, index) in titleList1.slice(1)" :key="index" :label="item.name" :prop="item.prop">

                    </el-table-column>
                </el-table>
                </div>
                <div v-show="tabActive=='list3'">
                <el-table
                    :max-height="height+'px'"
                    id="table3"
                    ref="table3"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData3"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="90" align="center" :label="titleList2[0] && titleList2[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList2[0].prop])">{{scope.row[titleList2[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, index) in titleList2.slice(1)" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>
                <div v-show="tabActive=='list4'">
                <el-table
                    :max-height="height+'px'"
                    id="table4"
                    ref="table4"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData4"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="90" align="center" :label="titleList3[0] && titleList3[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList3[0].prop])">{{scope.row[titleList3[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, index) in titleList3.slice(1)" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>
                <div v-show="tabActive=='list5'">
                <el-table
                    :max-height="height+'px'"
                    id="table5"
                    ref="table5"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData5"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="90" align="center" :label="titleList4[0] && titleList4[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList4[0].prop])">{{scope.row[titleList4[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, index) in titleList4.slice(1)" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>
                <div v-show="tabActive=='list6'">
                <el-table
                    :max-height="height+'px'"
                    id="table6"
                    size="mini"
                    ref="table6"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData6"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="100" align="center" :label="titleList5[0] && titleList5[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList5[0].prop])">{{scope.row[titleList5[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, index) in titleList5.slice(1)" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>
                <div v-show="tabActive=='list7'">
                <el-table
                    :max-height="height+'px'"
                    id="table7"
                    ref="table7"
                    size="mini"
                    :header-cell-style="{ background: '#eef1f6' }"
                    :data="tableData7"
                    v-loading="tableLoading"
                    style="width: 100%;"
                    border
                >
                    <el-table-column min-width="100" align="center" :label="titleList6[0] && titleList6[0].name">
                        <template slot-scope="scope">
                            <span class="blue" @click="handle_code(scope.row[titleList6[0].prop])">{{scope.row[titleList6[0].prop]}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column align="center" v-for="(item, index) in titleList6.slice(1)" :key="index" :label="item.name" :prop="item.prop"></el-table-column>
                </el-table>
                </div>

            </div>
      </div>

      <div v-if="isDetail">
          <el-table
            size="mini"
            :header-cell-style="{ background: '#eef1f6' }"
            :data="tableDetail"
            v-loading="tableLoading"
            style="width: 100%;"
            border
            >
                <el-table-column align="center" label="帐期" prop="acct_MONTH"></el-table-column>
                <el-table-column align="center" label="资产/客户id" prop="use_ID"></el-table-column>
                <el-table-column align="center" label="金额" prop="amt"></el-table-column>
                <el-table-column align="center" label="来源编码" prop="rule_NAME"></el-table-column>
                <el-table-column align="center" label="环比" prop="hb"></el-table-column>
                <el-table-column align="center" label="指标" prop="class1"></el-table-column>
          </el-table>
      </div>
    </main>
  </div>
</template>
<script>
// 引入导出Excel表格依赖
import FileSaver from 'file-saver';
import XLSX from 'xlsx';
import { $budgetAPI } from '@/api';
import { setSessionStorage, getSessionStorage, removeSessionStorage } from '@/common/js/storage';
export default {
    data() {
        return {
            form: {
                areaId: '',
                code: '',
                customer: '',
                customer1: '',
                accountPeriod: '',
                accountPeriodAll: '',
                pageSize: 10,
                assetType: 1
            },
            pageSizeList: [
                {
                    name: 10,
                    code: 10
                },
                {
                    name: 20,
                    code: 20
                },
                {
                    name: 50,
                    code: 50
                },
                {
                    name: 100,
                    code: 100
                }
            ],
            assetTypeList: [
                {
                    name: '资产',
                    value: 1
                },
                {
                    name: '客户',
                    value: 2
                }
            ],
            tabActive: 'list1',
            pickerOptions: this.pickerDisabled(),
            customerList: [],
            customerList1: [{
                indexName: '全部',
                indexCode: ''
            },
            {
                indexName: '公众',
                indexCode: '公众'
            },
            {
                indexName: '政企',
                indexCode: '政企'
            }],
            tableData1: [],
            tableData2: [],
            tableData3: [],
            tableData4: [],
            tableData5: [],
            tableData6: [],
            tableData7: [],
            titleList1: [],
            title1code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: 'TOP排名',
                    prop: 'topRanking'
                }
            ],
            title1cust:[
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: 'TOP排名',
                    prop: 'topRanking'
                }
            ],
            titleList2: [

            ],
            title2code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: 'TOP排名',
                    prop: 'topRanking'
                }
            ],
            title2cust: [
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: 'TOP排名',
                    prop: 'topRanking'
                }
            ],
            titleList3: [

            ],
            title3code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            title3cust: [
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },

                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            titleList4: [

            ],
            title4code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            title4cust: [
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            titleList5: [

            ],
            title5code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '上期支局ID',
                    prop: 'oldbranchId'
                },
                {
                    name: '上期支局名称',
                    prop: 'oldbranchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            title5cust: [
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '上期支局ID',
                    prop: 'oldbranchId'
                },
                {
                    name: '上期支局名称',
                    prop: 'oldbranchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            titleList6: [

            ],
            title6code: [
                {
                    name: '号码',
                    prop: 'numberp'
                },
                {
                    name: '资产编码',
                    prop: 'assetIntegId'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '上期支局ID',
                    prop: 'oldbranchId'
                },
                {
                    name: '上期支局名称',
                    prop: 'oldbranchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            title6cust: [
                {
                    name: '客户编码',
                    prop: 'customerCode'
                },
                {
                    name: '县分',
                    prop: 'countyBranch'
                },
                {
                    name: '县分名称',
                    prop: 'nameOfCountyBranch'
                },
                {
                    name: '支局ID',
                    prop: 'branchId'
                },
                {
                    name: '支局名称',
                    prop: 'branchName'
                },
                {
                    name: '上期支局ID',
                    prop: 'oldbranchId'
                },
                {
                    name: '上期支局名称',
                    prop: 'oldbranchName'
                },
                {
                    name: '客户名称',
                    prop: 'customerName'
                },
                {
                    name: '产品类型',
                    prop: 'productType'
                },
                {
                    name: '本期收入',
                    prop: 'currentIncome'
                },
                {
                    name: '上期收入',
                    prop: 'uPcurrentIncome'
                },
                {
                    name: '环比波动',
                    prop: 'fluctuation'
                },
                {
                    name: 'TOP编号',
                    prop: 'topno'
                },
                {
                    name: '客户经理ID',
                    prop: 'accountManagerId'
                },
                {
                    name: '客户经理名称',
                    prop: 'nameOfAccountManager'
                }
            ],
            titleList7: [
                {
                    name: '账期',
                    prop: 'cycle_MONTH'
                },
                {
                    name: '区域',
                    prop: 'area_NAME'
                },
                {
                    name: '上级区域',
                    prop: 'parent_AREA_NAME'
                },
                {
                    name: '层级',
                    prop: 'area_LVL'
                },
                {
                    name: '指标',
                    prop: 'zb_NAME'
                },
                {
                    name: '上期收入',
                    prop: 'last_AMT'
                },
                {
                    name: '本期收入',
                    prop: 'curr_AMT'
                },
                {
                    name: '环比波动',
                    prop: 'adj_AMT'
                },
                {
                    name: '新增收入',
                    prop: 'new_AMT'
                },
                {
                    name: '流失收入',
                    prop: 'los_AMT'
                },
                {
                    name: '存量波动',
                    prop: 'amt1'
                },
                {
                    name: '存量转出',
                    prop: 'amt3'
                },
                {
                    name: '存量转入',
                    prop: 'amt2'
                }
            ],
            codeList: [],
            tableLoading: true,
            disabledTime: '',
            height: '',
            isDetail: false,
            tableDetail: [],
            // currentPage:1,
        };
    },
    created() {
        window.addEventListener('resize', this.getHeight);
    },
    destroyed() {
        window.removeEventListener('resize', this.getHeight);
    },
    mounted() {
        let that = this;
        // 获取账户信息
        that.accountInfo = JSON.parse(getSessionStorage('accountInfo'));
        that.form.areaId = that.accountInfo.areaId;
        // 初始化数据
        that.getAll();
        that.initData();
        that.getHeight();
    },
    methods: {
        getHeight() {
            this.height = window.innerHeight - this.$refs.form.$el.offsetHeight - 83 - 54 - 51 - 40;
        },
        // 设置月份disabled
        pickerDisabled() {
            let self = this;
            return {
                disabledDate(time) {
                    if (self.disabledTime) {
                        let timeyear = time.getFullYear();
                        let timemonth = time.getMonth() + 1;
                        if (timemonth >= 1 && timemonth <= 9) {
                            timemonth = '0' + timemonth;
                        }
                        let currentdate = timeyear.toString() + timemonth.toString();
                        if (currentdate > self.disabledTime) {
                            return true;
                        }
                    }
                }
            };
        },
        // 搜索
        handle_search() {
            let that = this;

            // if (!that.form.accountPeriod && that.tabActive != 'list7') {
            //     that.$message({
            //         type: 'error',
            //         message: '请选择时间'
            //     })
            //     return false;
            // }
            if (!that.form.accountPeriodAll) {
                that.$message({
                    type: 'error',
                    message: '请选择时间'
                })
                return false;
            }
            that.getAllInitData();
            that.getData();
            // that.tabActive == 'list7' ? that.getAllInitData() : that.getData();
        },
        // 导出
        handle_export() {
            let that = this;
            let workbook = XLSX.utils.book_new();
            let ws0 = XLSX.utils.table_to_sheet(document.querySelector('#table1'));
            XLSX.utils.book_append_sheet(workbook, ws0, '波动汇总');
            let ws1 = XLSX.utils.table_to_sheet(document.querySelector('#table2'));
            XLSX.utils.book_append_sheet(workbook, ws1, '本期新增TOP资产');
            let ws2 = XLSX.utils.table_to_sheet(document.querySelector('#table3'));
            XLSX.utils.book_append_sheet(workbook, ws2, '本期流失TOP资产');
            let ws3 = XLSX.utils.table_to_sheet(document.querySelector('#table4'));
            XLSX.utils.book_append_sheet(workbook, ws3, '存量下降波动');
            let ws4 = XLSX.utils.table_to_sheet(document.querySelector('#table5'));
            XLSX.utils.book_append_sheet(workbook, ws4, '存量上涨波动');
            let ws5 = XLSX.utils.table_to_sheet(document.querySelector('#table6'));
            XLSX.utils.book_append_sheet(workbook, ws5, '存量转入');
            let ws6 = XLSX.utils.table_to_sheet(document.querySelector('#table7'));
            XLSX.utils.book_append_sheet(workbook, ws6, '存量转出');

            //  if (!that.form.accountPeriod && that.tabActive != 'list7') {
            //     that.$message({
            //         type: 'error',
            //         message: '请选择时间'
            //     })
            //     return false;
            // }
            if (!that.form.accountPeriodAll) {
                that.$message({
                    type: 'error',
                    message: '请选择时间'
                })
                return false;
            }

            let wbout = XLSX.write(workbook, {
                bookType: 'xlsx',
                bookSST: true,
                type: 'array'
            });
            try {
                FileSaver.saveAs(
                    new Blob([wbout], {
                        type: 'application/octet-stream'
                    }),
                    '波动.xlsx'
                );
            } catch (e) {
                if (typeof console !== 'undefined') console.log(e, wbOut);
            }
            return wbout;
        },
        // 返回
        handle_back() {
            this.isDetail = false;
            // this.$router.go(-1);
        },
        // 初始化数据
        async initData() {
            let that = this,
                accountPeriod,
                code,
                customer,
                obj = {};
            // code = await that.getCodeList();
            customer = await that.getCustomerGroup();
            accountPeriod = await that.getMonth();
            // that.codeList = code.slice(0,4);
            that.customerList = customer;
            that.form.accountPeriod = accountPeriod;
            that.disabledTime = accountPeriod;
            // that.form.code = that.$route.query.code || code[0].indexCode;
            that.form.customer = that.$route.query.customer || '';
            that.getData();
        },
        async getAll() {
            let that = this,
                accountPeriodAll,
                code,
                obj = {};
            code = await that.getCodeList();
            accountPeriodAll = await that.getAllMonth();
            that.codeList = code;
            that.form.accountPeriodAll = accountPeriodAll;
            that.disabledTime = accountPeriodAll;
            that.form.code = that.$route.query.code || code[0].indexCode;
            that.getAllInitData();
        },
        getAllInitData() {
            let param = {
                CYCLE_MONTH: this.form.accountPeriodAll,
                AREA_ID: this.form.areaId,
                ZB: this.form.code,
                custFlg: this.form.customer1
            };
            this.tableLoading = true;
            $budgetAPI.volatilitySummary(
                param,
                res => {
                    if (res.content.code == 0) {
                        this.tableData1 = res.content.content.data;
                    }
                    // this.tableLoading = false;
                },
                err => {
                    console.log(err);
                    this.tableLoading = false;
                }
            );
        },
        // 获取月份
        getMonth() {
            return new Promise(resolve => {
                $budgetAPI.incomeKeepRegionalMonth(
                    {
                        maximum: 7
                    },
                    res => {
                        if (res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        // 获取波动汇总月份
        getAllMonth() {
            return new Promise(resolve => {
                $budgetAPI.incomeKeepRegionalMonth(
                    {
                        maximum: 9
                    },
                    res => {
                        if (res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {
                        console.log(err);
                    }
                );
            });
        },
        getCodeList() {
            let that = this;

            return new Promise(resolve => {
                $budgetAPI.getIndexCodeList(
                    {areaId:that.form.areaId},
                    res => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {}
                );
            });
        },
        getCustomerGroup() {
            let that = this;

            return new Promise(resolve => {
                $budgetAPI.getCustomerGroup(
                    {},
                    res => {
                        if (res && res.code == 0) {
                            resolve(res.content);
                        }
                    },
                    err => {}
                );
            });
        },
        // 获取data
        getData() {
            let that = this;
            let obj = {
                accountPeriod:  that.form.accountPeriodAll,
                areaId: that.form.areaId,
                customer: that.form.customer,
                code: that.form.code,
                pageSize: that.form.pageSize,
                assetType: that.form.assetType
            };
            that.tableLoading = true;
            $budgetAPI.waveTOPN(
                {
                    bilMonth: obj.accountPeriod, //账期
                    areaId: obj.areaId, //	区域id
                    indexCode: obj.customer, //客户群
                    busiCode: obj.code, //指标code
                    pageSize: obj.pageSize,
                    assetType: obj.assetType
                },
                res => {

                    let data = res.content.content.data,
                        list1 = data.thisIssueList,
                        list2 = data.thisIssueList1,
                        list3 = data.thisIssueList5,
                        list4 = data.thisIssueList2,
                        list5 = data.thisIssueList3,
                        list6 = data.thisIssueList4;
                    that.tableData2 = list1;
                    that.tableData3 = list2;
                    that.tableData4 = list3;
                    that.tableData5 = list4;
                    that.tableData6 = list5;
                    that.tableData7 = list6;
                    if(that.form.assetType == 1) {
                        that.titleList1 = that.title1code
                        that.titleList2 = that.title2code
                        that.titleList3 = that.title3code
                        that.titleList4 = that.title4code
                        that.titleList5 = that.title5code
                        that.titleList6 = that.title6code
                    }
                    if(that.form.assetType == 2) {
                        that.titleList1 = that.title1cust
                        that.titleList2 = that.title2cust
                        that.titleList3 = that.title3cust
                        that.titleList4 = that.title4cust
                        that.titleList5 = that.title5cust
                        that.titleList6 = that.title6cust
                    }
                    that.$nextTick(() => {
                        that.$refs.table2.doLayout();
                        that.$refs.table3.doLayout();
                        that.$refs.table4.doLayout();
                        that.$refs.table5.doLayout();
                        that.$refs.table6.doLayout();
                        that.$refs.table7.doLayout();
                    });
                     that.tableLoading = false;
                },
                err => {
                    console.log(err);
                }
            );
        },
        handleClick(tab, event) {
            console.log(tab);
            var title = Object.assign([], this.titleList1)
            if(this.tabActive != 'list1') {
                if(this.form.assetType == 1) {
                    this.titleList1 = this.title1code
                    this.titleList2 = this.title2code
                    this.titleList3 = this.title3code
                    this.titleList4 = this.title4code
                    this.titleList5 = this.title5code
                    this.titleList6 = this.title6code
                }
                if(this.form.assetType == 2) {
                    this.titleList1 = this.title1cust
                    this.titleList2 = this.title2cust
                    this.titleList3 = this.title3cust
                    this.titleList4 = this.title4cust
                    this.titleList5 = this.title5cust
                    this.titleList6 = this.title6cust
                }
            }
        },
        handle_code(id) {
            // console.log(it)
            // return
            // // var id = this.form.assetType == 1 ? it.numberp : it.customerCode;
            this.isDetail = true;
            $budgetAPI.getTopDetail({
                useId: id,
                month: this.form.accountPeriodAll
            }, res=>{
                console.log(res)
                this.tableDetail = res.content.content
            })
        },
    }
};
</script>

<style lang="scss" scoped>
.total_container {
    .hover {
        cursor: pointer;
        color: #3456dc;
    }
    .num {
        &:hover {
            color: #3456dc;
        }
    }
    & > header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        border-bottom: 1px solid #eaeaea;
        height: 40px;
        margin: 0 -20px;
        padding: 0 20px;
        & > p {
            font-weight: bold;
            font-size: 15px;
        }
    }
    & > main {
        padding: 0 10px 10px;
        .main_searchBar {
            border-bottom: 1px solid #d6d9e5;
            /deep/ .el-form-item {
                margin: 6px 10px 6px 0;
            }
            button {
                color: #fff;
                border: none;
                outline: none;
                &:hover {
                    opacity: 0.8;
                }
            }
            #search_btn {
                background-color: #2a90de;
            }

            #export_btn {
                background-color: #2cd531;
            }
        }
        .main_navBar {
            padding: 10px 0;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .area {
                text-align: left;
                display: flex;
                .it {
                    cursor: pointer;
                    font-size: 14px;
                    display: inline-block;
                    .td {
                        font-weight: bold;
                    }
                    &:last-child {
                        span {
                            &:last-child {
                                display: none;
                            }
                        }
                    }
                }
            }
        }
    }
}
.blue {
    color: #2a90de;
    cursor: pointer;
}
</style>
<style lang="scss">
.tables {
    .el-tabs__header {
        margin: 0;
    }
}
</style>
